<template>
  <view>
    <view class="recharge-wrapper">
      <view style="margin-bottom: 40rpx;" class="u-f-ac">
        <view class="title">充值金额:</view>
        <view class="input">
          <input v-model="form.amount" type="number" placeholder="请输入充值金额" placeholder-class="placeholder" />
        </view>
      </view>
      <view style="margin-bottom: 40rpx;" class="u-f-ac">
        <view class="title">开户银行:</view>
        <view class="input">
          <input v-model="form.bank" placeholder="请输入开户银行" placeholder-class="placeholder" />
        </view>
      </view>
      <view style="margin-bottom: 40rpx;" class="u-f-ac">
        <view class="title">账号:</view>
        <view class="input">
          <input v-model="form.account" placeholder="请输入账号" placeholder-class="placeholder" />
        </view>
      </view>
      <view style="margin-bottom: 40rpx;" class="u-f-ac">
        <view class="title">开户姓名:</view>
        <view class="input">
          <input v-model="form.account_name" placeholder="请输入开户姓名" placeholder-class="placeholder"
            style="font-size: 24rpx;" />
        </view>
      </view>
      <view style="margin-bottom: 40rpx;" class="u-f-ac">
        <view class="title">汇款人姓名:</view>
        <view class="input">
          <input v-model="form.pay_name" placeholder="请输入汇款人姓名" placeholder-class="placeholder" />
        </view>
      </view>
      <!-- <view style="margin-bottom: 40rpx;" class="u-f-ac">
        <view class="title">流水凭证号:</view>
        <view class="input">
          <input v-model="form.voucher_no" placeholder="请输入流水凭证号" placeholder-class="placeholder" />
        </view>
      </view> -->
      <view style="margin-bottom: 40rpx;" class="u-f-ac">
        <view class="title">汇款交易时间:</view>
        <view class="input" @click="show = true">
          <input v-model="create_time" placeholder="请选择汇款交易时间" placeholder-class="placeholder" disabled />
        </view>
      </view>
    </view>

    <view class="upload_sfz">
      <view class="upload_content">
        <view class="upload_img" @click="uploadAuthImg">
          <image src="/static/images/huangjin/upload.png" mode="scaleToFill"></image>
        </view>
        <view class="upload_details">
          <view class="upload_details">
            请上传凭证
          </view>
          <!-- <view class="upload_btn">
						<button size="default" type="primary" @click="submit1">上传</button>
					</view> -->
        </view>
      </view>
    </view>
    <view style="padding: 0 30rpx;" v-if="form.voucher">
      <scroll-view scroll-x style="width: 100%;white-space: nowrap;">
        <image :src="form.voucher" style="width: 150rpx;height: 150rpx;display: inline-block;margin-right: 20rpx;">
        </image>
      </scroll-view>
    </view>

    <!-- <view class="recharge-btn" @click="submitRecharge"></view> -->

    <view class="recharge_btn u-f-ajc" @click="$u.debounce(submitRecharge, 1000, true)">
      确定充值
    </view>

    <view class="bankCard-message">
      <view class="title">请直接转账到以下银行账户</view>
      <view class="number">账号:<text @click="copyBankCard('338070100100413189')">338070100100413189</text></view>
      <view class="name">账户名:<text @click="copyBankCard('兴瑞盈嘉电子商务（深圳）有限公司')">兴瑞盈嘉电子商务（深圳）有限公司</text></view>
      <view class="name">开户银行:<text @click="copyBankCard('兴业银行深圳和平支行')">兴业银行深圳和平支行</text></view>
    </view>

    <u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
  </view>
</template>

<script>
  import * as API_Haibao from '@/api/haibao.js';
  import {
    pathToBase64,
    base64ToPath
  } from '@/js_sdk/gsq-image-tools/image-tools/index.js'
  import {
    api
  } from '@/config/config.js'
  export default {
    data() {
      return {
        show: false,
        params: {
          year: true,
          month: true,
          day: true,
          hour: true,
          minute: true,
          second: false,
        },
        create_time: '',
        form: {
          amount: '', // 充值金额
          account: "338070100100413189",
          bank: '兴业银行深圳和平支行',
          buyer_id: uni.getStorageSync('user').member_id, // 用户id
          create_time: '',
          is_pay: 0,
          // voucher_no: "",
          account_name: '兴瑞盈嘉电子商务（深圳）有限公司',
          pay_name: '',
          voucher: '', // 图片
        },
        rules: {
          amount: '请输入充值金额',
          bank: '请输入开户银行',
          account: '请输入账号',
          account_name: '请输入开户姓名',
          pay_name: '请输入汇款人姓名',
          create_time: '请选择汇款交易时间',
          voucher: '请上传凭证',
        }
      }
    },
    created() {

    },
    methods: {
      confirm(e) {
        this.create_time = `${e.year}/${e.month}/${e.day} ${e.hour}:${e.minute}:00`
        this.form.create_time = new Date(this.create_time).getTime() / 1000
        console.log(this.form.create_time)
      },
      submitRecharge() {
        for (let item of Object.keys(this.rules)) {
          if (!this.form[item] || (!this.form[item] && !this.form[item].length)) {
            return this.$u.toast(this.rules[item])
          }
        }
        this.submitInfo()
      },
      async submitInfo() {
        console.log(this.form)
        let res = await API_Haibao.paymentBankVoucher(this.form)
        // if (res.state == 1) {
        uni.showToast({
          title: '提交成功！',
          icon: "none"
        })
        setTimeout(() => {
          this.$u.route({
            type: 'tab',
            url: '/pages/tabs/mine/mine'
          })
        }, 1200)
        // } else {
        //   uni.showToast({
        //     title: res.msg,
        //     icon: "none"
        //   })
        // }
      },
      copyBankCard(data) {
        uni.setClipboardData({
          data: data,
          success() {
            uni.showToast({
              title: '复制成功',
              duration: 1000,
              icon: "none"
            })
          }
        })
      },
      // 上传图片
      uploadAuthImg() {
        let that = this
        uni.chooseImage({
          count: 9,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: res => {
            for (let i = 0; i < res.tempFilePaths.length; i++) {
              uni.showLoading({
                title: '上传中'
              })
              uni.uploadFile({
                url: `${api.base}/uploaders`,
                filePath: res.tempFilePaths[i],
                name: 'file',
                success: (uploadFileRes) => {
                  console.log(uploadFileRes)
                  const data = typeof uploadFileRes.data === 'string' ? JSON.parse(uploadFileRes.data) :
                    uploadFileRes.data
                  // that.form.voucher = data.url.replace('localhost:7000', 'api.base.ruixingzhubao.xjkuang.com')
                  that.form.voucher = data.url
                },
                complete() {
                  uni.hideLoading()
                },
              })
            }
            // pathToBase64(src).then(async base64 => {
            //   this.form.voucher = base64
            //   const res = await this.$api.uploadImg({
            //     base64: this.form.voucher,
            //     type: 11
            //   })
            //   console.log(res)
            //   this.form.voucher = res.obj.url
            // })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  // page {
  //   background: #FFFFFF !important;
  // }

  .remaining-money {
    margin: 10rpx 20rpx;
    // width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 20rpx;
    text-align: center;
    background: #4D4D4D;
    color: #FFFFFF;
    font-size: 30rpx;

    text {
      color: #ff6600;
      font-weight: bold;
    }
  }

  .recharge-wrapper {
    margin: 20rpx 0 0;
    padding: 30rpx 20rpx 0;
    // background: $app-background;
    border-radius: 20rpx;

    .title {
      text-align: right;
      width: 200rpx;
      // color: $app-Gold-color;
      font-size: 30rpx;
      font-weight: bold;
    }

    .input {
      width: 65%;
      border-bottom: 1rpx solid #ece8e8;
      // margin-top: 20rpx;
      margin-left: 20rpx;

      .placeholder {
        // color: $app-Gold-color;
        font-size: 20rpx;
      }

      input {
        // color: $app-Gold-color;
      }
    }
  }

  .upload_sfz {
    // width: 750rpx;
    height: 250rpx;
    background: #4D4D4D;
    margin: 20rpx;
    border-radius: 20rpx;
  }

  .upload_content {
    height: 273rpx;
    display: flex;
    justify-content: space-around;
  }

  .upload_img {
    width: 330rpx;
    height: 209rpx;
    margin: 20rpx;
  }

  .upload_img image {
    width: 200rpx;
    height: 200rpx;
  }

  .upload_details {
    height: 70rpx;
    margin: 20rpx 0 0 20rpx;
    line-height: 70rpx;
    text-align: center;
    font-weight: bold;
    color: $app-Gold-color;
  }

  .recharge-btn {
    margin: 20rpx;
    // background: #5384ED;
    background: #F68F80;
    color: $app-Gold-color;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    font-size: 30rpx;
  }

  .bankCard-message {
    margin: 20rpx;
    padding: 40rpx 20rpx;

    // background: #CCCCCC;
    view {
      margin-bottom: 10rpx;

      text {
        color: red;
      }
    }
  }

  .recharge_btn {
    width: 100%;
    height: 110rpx;
    margin-top: 30rpx;
    text-align: center;
    color: #fff;
    background: url(/static/images/chongzhi/button.png) no-repeat 0 0;
    background-size: cover;
  }
</style>